<script setup lang="ts">
import { onMounted } from 'vue'
import { Location, Edit, Search, PieChart, Delete, Plus, Close } from '@element-plus/icons-vue'
import { useMapView } from '@/utils/MapView'
import '@/assets/styles/map-view.css'
import { RouterView } from 'vue-router'

const {
  mapDiv,
  layerVisibility,
  isCollapse,
  activeMenu,
  userRole,
  initMap,
  handleLogout,

  handleAddLandParcel,
  handleEditLandParcel,
  handleDeleteLandParcel,

} = useMapView()

onMounted(() => {
  initMap()
})
</script>

<template>
  <el-container>
    <!-- 侧边栏 -->
    <el-aside>
      <el-menu
        :collapse="isCollapse"
        :default-active="activeMenu"
        class="el-menu-vertical"
        background-color="#2c8e69"
        text-color="#f5f7fa"
        active-text-color="#ffd54f"
      >
        <el-menu-item index="0" @click="isCollapse = !isCollapse">
          <el-icon>
            <component :is="isCollapse ? 'Expand' : 'Fold'" />
          </el-icon>
          <template #title>{{ isCollapse ? '' : '收起菜单' }}</template>
        </el-menu-item>

        <el-menu-item index="1" @click="$router.push('/map')">
          <el-icon><Location /></el-icon>
          <template #title>地图浏览</template>
        </el-menu-item>

        <el-sub-menu index="3">
          <template #title>
            <el-icon><Search /></el-icon>
            <span>地块查询</span>
          </template>
          <el-menu-item index="3-1" @click="$router.push('/map/parcel-query')">
            <span>属性查询</span>
          </el-menu-item>
        </el-sub-menu>

        <!-- 地块编辑菜单 -->
        <el-sub-menu index="4" v-if="userRole === 'admin'">
          <template #title>
            <el-icon><Edit /></el-icon>
            <span>地块编辑</span>
          </template>
          <el-menu-item index="4-1" @click="$router.push('/map/parcel-edit?operation=add')">
            <el-icon><Plus /></el-icon>
            <span>新增地块</span>
          </el-menu-item>
          <el-menu-item index="4-2" @click="$router.push('/map/parcel-edit?operation=edit')">
            <el-icon><Edit /></el-icon>
            <span>修改地块</span>
          </el-menu-item>
          <el-menu-item index="4-3" @click="$router.push('/map/parcel-edit?operation=delete')">
            <el-icon><Delete /></el-icon>
            <span>删除地块</span>
          </el-menu-item>
        </el-sub-menu>

        <el-menu-item index="5" @click="$router.push('/map/statistics')">
          <template #title>
            <el-icon><PieChart /></el-icon>
            <span>统计分析</span>
          </template>
        </el-menu-item>
      </el-menu>
    </el-aside>

    <!-- 主内容区 -->
    <el-container>
      <!-- 顶部导航栏 -->
      <el-header>
        <div class="header-title">
          <el-icon class="header-icon"><Location /></el-icon>
          土地信息管理系统
        </div>
        <div class="header-actions">
          <el-button type="danger" @click="handleLogout" class="logout-button">
            <el-icon><Close /></el-icon>
            退出登录
          </el-button>
        </div>
      </el-header>

      <router-view />
    </el-container>
  </el-container>
</template>

<style scoped></style>
